<template>
  <LayoutTopBottom :show-footer="false">
    <template #header>
      <div class="header-title">
        <div class="contact-name no-drag">小明</div>
      </div>
    </template>

    <template #body>
      <LayoutScroll>
        <template #item>
          <div class="collection-container">
            <div
              class="collection-item"
              v-for="item in collectionList"
              :key="item.id"
            >
              <!-- 左侧 -->
              <div class="item-left">
                <div class="title">{{ item.title }}</div>
                <div class="description">{{ item.description }}</div>

                <div class="other-info">
                  <!-- 来源 -->
                  <div class="from">
                    <span
                      class="iconfont icon-gongzhonghao"
                      style="margin-right: 5px"
                    ></span>
                    <span>{{ item.from_name }}</span>
                  </div>
                  <div class="creater">
                    {{ item.creater }}
                  </div>
                  <!-- 标签 -->
                  <div class="tags">
                    <div
                      v-for="tag in item.related_tags"
                      :key="tag.tagid"
                      class="tag"
                    >
                      <span
                        class="iconfont icon-biaoqian"
                        style="margin-right: 2px"
                      ></span>
                      <span>{{ tag.tag_name }}</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 右侧 -->
              <div class="item-right">
                <!-- 图片 -->
                <img
                  :src="item.avatar"
                  style="width: 50px; height: 50px"
                  alt=""
                />
                <!-- 时间 -->
                <div class="time">{{ item.createtime }}</div>
              </div>
            </div>
          </div>
        </template>
      </LayoutScroll>
    </template>
  </LayoutTopBottom>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";
import LayoutTopBottom from "@/components/layout/LayoutTopBottom.vue";
import LayoutScroll from "@/components/layout/LayoutScroll.vue";

const route = useRoute();

const collectionList = ref<any>([
  {
    id: 1,
    title: "Vue:实时天气小demo",
    description:
      "使用vue3+ts+axios+vuex+vue-router+element-plus+less+mock等技术栈开发的一个实时天气小demo",
    avatar: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
    url: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
    from: 1,
    from_name: "程序员成长指北",
    creater: "木木",
    createtime: "1月23日",
    related_tags: [
      {
        tagid: 1,
        tag_name: "vue3",
      },
      {
        tagid: 2,
        tag_name: "ts22222",
      },
      {
        tagid: 3,
        tag_name: "ts2222",
      },
      {
        tagid: 4,
        tag_name: "33333",
      },
      {
        tagid: 5,
        tag_name: "ts4444",
      },
      {
        tagid: 6,
        tag_name: "ts555",
      },
      {
        tagid: 7,
        tag_name: "ts666",
      },
      {
        tagid: 8,
        tag_name: "ts77",
      },
    ],
  },
  {
    id: 2,
    title: "Vue:实时天气小demo",
    description:
      "使用vue3+ts+axios+vuex+vue-router+element-plus+less+mock等技术栈开发的一个实时天气小demo",
    avatar: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
    url: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
    from: 1,
    from_name: "程序员成长指北",
    creater: "木木",
    createtime: "1月23日",
    related_tags: [
      {
        tagid: 1,
        tag_name: "vue3",
      },
      {
        tagid: 2,
        tag_name: "ts",
      },
    ],
  },
  {
    id: 3,
    title: "Vue:实时天气小demo",
    description:
      "使用vue3+ts+axios+vuex+vue-router+element-plus+less+mock等技术栈开发的一个实时天气小demo",
    avatar: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
    url: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
    from: 1,
    from_name: "程序员成长指北",
    creater: "木木",
    createtime: "1月23日",
    related_tags: [
      {
        tagid: 1,
        tag_name: "vue3",
      },
      {
        tagid: 2,
        tag_name: "ts",
      },
    ],
  },
  {
    id: 4,
    title: "Vue:实时天气小demo",
    description:
      "使用vue3+ts+axios+vuex+vue-router+element-plus+less+mock等技术栈开发的一个实时天气小demo",
    avatar: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
    url: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
    from: 1,
    from_name: "程序员成长指北",
    creater: "木木",
    createtime: "1月23日",
    related_tags: [
      {
        tagid: 1,
        tag_name: "vue3",
      },
      {
        tagid: 2,
        tag_name: "ts",
      },
    ],
  },
  {
    id: 5,
    title: "Vue:实时天气小demo",
    description:
      "使用vue3+ts+axios+vuex+vue-router+element-plus+less+mock等技术栈开发的一个实时天气小demo",
    avatar: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
    url: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
    from: 1,
    from_name: "程序员成长指北",
    creater: "木木",
    createtime: "1月23日",
    related_tags: [
      {
        tagid: 1,
        tag_name: "vue3",
      },
      {
        tagid: 2,
        tag_name: "ts",
      },
    ],
  },
  {
    id: 6,
    title: "Vue:实时天气小demo",
    description:
      "使用vue3+ts+axios+vuex+vue-router+element-plus+less+mock等技术栈开发的一个实时天气小demo",
    avatar: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
    url: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
    from: 1,
    from_name: "程序员成长指北",
    creater: "木木",
    createtime: "1月23日",
    related_tags: [
      {
        tagid: 1,
        tag_name: "vue3",
      },
      {
        tagid: 2,
        tag_name: "ts",
      },
    ],
  },
  {
    id: 7,
    title: "Vue:实时天气小demo",
    description:
      "使用vue3+ts+axios+vuex+vue-router+element-plus+less+mock等技术栈开发的一个实时天气小demo",
    avatar: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
    url: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
    from: 1,
    from_name: "程序员成长指北",
    creater: "木木",
    createtime: "1月23日",
    related_tags: [
      {
        tagid: 1,
        tag_name: "vue3",
      },
      {
        tagid: 2,
        tag_name: "ts",
      },
    ],
  },
]);
</script>

<style scoped lang="scss">
.header-title {
  height: 60px;
  padding: 0px 0 12px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 25px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #e7e7e7;
}

.collection-container {
  width: 100%;
  height: 100%;
  padding: 18px 55px;

  .collection-item {
    width: 100%;
    height: 120px;
    min-width: 320px;
    padding: 20px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &:not(:first-child) {
      margin-top: 10px;
    }

    &:active {
      background-color: #e6e6e6;
    }

    .item-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: start;
      width: 700px;
      height: 80px;
      padding-right: 20px;
      flex-grow: 1;
      overflow: hidden;

      .title {
        font-size: 14px;
      }

      .description {
        width: 100%;
        font-size: 12px;
        color: #b2b2b2;
        height: 50px;
        padding-top: 5px;
        text-overflow: ellipsis; /* 显示省略号 */
        white-space: nowrap;
        overflow: hidden;
        /* 禁止文本换行 */
        display: block;
      }

      .other-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 17px;
        font-size: 12px;
        color: #b2b2b2;
        white-space: nowrap;
        overflow: hidden;

        .from {
          display: flex;
          align-items: center;
          justify-content: center;
          padding-right: 10px;
          border-right: 1px solid #e7e7e7;
        }

        .creater {
          margin-left: 10px;
          margin-right: 10px;
        }

        .tags {
          display: flex;
          align-items: center;
          justify-content: center;

          .tag {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4f6186;
            margin: 0 5px;

            &:hover {
              cursor: pointer;
            }
          }
        }
      }
    }

    .item-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 80px;

      .time {
        height: 17px;
        font-size: 13px;
        color: #b2b2b2;
      }
    }
  }
}
</style>
